{include file="common/head"/}
<style>
    .sort{
        width: 100px;
        height: 25px;
        text-align: center;
    }
    #pid{
        height: 32px;
        padding: 3px 28px;
    }
    .opts{
        line-height: 45px;
    }
    .opts>span{
        width: 88px;
        display: inline-block;
        text-align: right;
    }
    .opts input{
        height: 30px;
        padding-left: 10px;
        width: 260px;
    }
</style>
<div class="admin-main layui-anim layui-anim-upbit">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>{$title}</legend>
    </fieldset>
    <blockquote class="layui-elem-quote">
        <a href="javascript:add();" class="layui-btn layui-btn-sm">{:lang('add')}类型</a>
    </blockquote>
    <table class="layui-table">
        <thead>
        <tr>
            <th>编号</th>
            <th>标题</th>
            <th>排序</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="con">


        <!--<tr>
            <td class="visible-lg visible-md">2</td>
            <td class="text-left">关于我们</td>
            <td class="visible-lg visible-md">单页模型</td>
            <td class="visible-lg visible-md">单页模型</td>
            <td>
                <a class="blue" title="添加子故障" href="javascript:;"> <i class="icon icon-plus"></i></a> |
                <a class="green" href="" title="修改"><i class="icon icon-pencil2"></i></a> |
                <a class="red" href="javascript:del('2')" title="删除"><i class="icon icon-bin"></i></a>
            </td>
        </tr>-->


        </tbody>
        <tfoot>
    </table>
</div>
{include file="common/foot"/}
<script src="/public/static/common/js/jquery.2.1.1.min.js"></script>
<script>

    var cache = '';

    var durl = '{:url("typeList")}';
    $.post(durl,callback);

    function callback(data) {
        var str = '';
        cache = data;
        $('#con').empty();

        $.each(data,function (k,v) {
            str = '<tr>';
            str += '<td class="visible-lg visible-md">'+v.id+'</td>';
            str += '<td class="text-left">'+v.type_name+'</td>';
            str += '<td class="visible-lg visible-md"><input type="number" class="sort" onchange="sort(this)" d="'+v.id+'" value="'+v.sort+'"></td>';
            str += '<td>';

            str += '<a class="green" href="javascript:edit('+v.id+',\'1\');" title="修改"><i class="icon icon-pencil2"></i></a> |';
            str += '<a class="red" href="javascript:del('+v.id+')" title="删除"><i class="icon icon-bin"></i></a>';
            str += '</td></tr>';


            $('#con').append(str);
        });
    }


    layui.use('table', function(){
        var $= layui.jquery;


    });


    //排序
    function sort(_t) {
        var id = $(_t).attr('d');
        var sort = $(_t).val();
        var sub = {
            id:id,
            sort:sort
        };
        $.post('{:url("typeEdit")}',sub,function (cal) {
            if(cal.code=1){
                layer.msg('排序成功',{icon:6});
            }else{
                layer.msg(cal.msg,{icon:5});
            }
        });
    }

    //删除
    function del(id) {
        layer.confirm('你确定要删除？', {icon: 3}, function (index) {
            $.post('{:url("typeDel")}', {id: id}, function (data) {
                if (data.code === 1) {
                    layer.msg('删除成功！',{icon:6});
                    $.post(durl,callback);
                }else{
                    layer.msg(data.msg,{icon:5});
                }
            });
            layer.close(index);
        });
    }

    /**
     * 修改
     * @param id
     */
    function edit(id) {
        var tval = seac(id);
        add(tval.id,tval)
    }

    //添加
    function add(id,of) {
        var str = '<div id="adds">';
        var url = '';
        var msg = '';

        if(of){
            url = '{:url("typeEdit")}';
            msg = '修改成功';
            str += '<div class="opts"><span>名称：</span><input type="text" name="type_name" value="'+of.type_name+'"></div>';
            str += '<div class="opts"><span>排序：</span><input type="number" value="'+of.sort+'" name="sort" ></div>';
        }else{
            url = '{:url("typeAdd")}';
            msg = '添加成功';
            str += '<div class="opts"><span>名称：</span><input type="text" name="type_name"></div>';
            str += '<div class="opts"><span>排序：</span><input type="number" value="1" name="sort"></div>';
        }

        str += '</div>';
        layer.open({
            title:'添加',
            btn:['确认','取消'],
            area:['440px','320px'],
            content:str,
            success:function () {

            },
            yes:function (index) {

                var obj = {
                    type_name:$.trim($('input[name=type_name]').val()),
                    sort:$.trim($('input[name=sort]').val()),
                };

                if(of){
                    obj.id = id;
                }

                $.post(url,obj,function (cal) {


                    if(cal.code=1){
                        layer.msg(msg,{icon:6});
                        $.post(durl,callback);
                    }else{
                        layer.msg(cal.msg,{icon:5});
                    }



                });
            }
        });
    }


    function seac(id) {
        for (var i=0;i<cache.length;i++){
            if(id == cache[i].id){
                return cache[i];
            }
        }
        return null;
    }



</script>